<template>
  <div class="village-wrap centerFull">
    <div class="main g-bkColor">
      <div class="center" style="overflow-x:hidden" v-bind:style="{ height: height + 'px', width: width + 'px', position: staticState, top: 0, left: 0}">
        <!--        <Alarm-map :dept-id="this.$route.params.deptId"></Alarm-map>-->
        <Mapp ref="map" mapStyle="amap://styles/blue" uniqueId='equipmentId' :popWindowTemp="popWindowTemp" :popWindowCallback="popWindowCallback" :dotList="allList"></Mapp>
        <div class="warningNote" :class="{'fullS':fullScreenNote}">
          <div class="warning" v-for="(item,i) in warningListNote" :key="item.id">
            <div class="warningLeft">报警信息</div>
            <div class="content">{{item.eventContent}}-{{item.moduleName}}发生报警，请及时处理<span class="closeBtn" @click="delWarningNote(i)">x</span></div>
          </div>
        </div>
        <div class="leftConPad">
          <div class="blockTitle" @click="aqltFullScreen">安庆</div>
          <div class="blockTitle2">安徽安庆湖心北路77号</div>
          <div v-for="item in warningCount" class="countBox" :key="item.id">
            <div class="countName">{{item.name}}<span class="num">{{item.v}}</span></div>
            <div class="aLine" :style="{backgroundColor: '#1B3D63'}">
              <div class="line" :style="{height: '4px',width:((item.v/item.all)*310+'px'),backgroundColor:item.c}"></div>
            </div>
          </div>
          <div class="airTitle">扬尘监测</div>
          <div class="quality-box">
            <div class="side mR10 g-bkColor2" style="margin-right:10px;">
              <!--雷达图-->
              <EnvironmentAware :dept-id="this.$route.params.deptId"></EnvironmentAware>
            </div>
          </div>
          <div class="littleBinTitle">垃圾桶满溢</div>
          <div class="littleBinImg">
            <div class="littleBinPerNum1">{{garbagePer1}}</div>
            <el-tooltip class="item" effect="dark" :content="binAddress1" placement="right">

              <div class="bin1 bin">
                <div class="litterP" :style="{bottom: litterPGBottom + 'px'}"></div>
              </div>
            </el-tooltip>

            <div class="littleBinPerNum2">{{garbagePer2}}</div>
            <el-tooltip class="item" effect="dark" :content="binAddress2" placement="right">

              <div class="bin2 bin">

                <div class="litterP" :style="{bottom: litterPYBottom + 'px'}"></div>
              </div>
            </el-tooltip>

          </div>
        </div>
        <div class="rightConPad">

          <div class="equipmentBtnBarTitle">显示设备</div>
          <div class="equipmentBtnBarT">
            <el-switch v-model="showEquipment" @change="showEquipmentChange" active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
            <!--<div class="btn" :class="{'select': selectEBtnList[0].select}" @click="selectE(0)">
              <div class="icon"></div>
              <div class="name">地磁</div>
            </div>
            <div class="btn" :class="{'select': selectEBtnList[1].select}" @click="selectE(1)">
              <div class="icon"></div>
              <div class="name">地磁</div>
            </div>
            <div class="btn" :class="{'select': selectEBtnList[2].select}" @click="selectE(2)">
              <div class="icon"></div>
              <div class="name">地磁</div>
            </div>
            <div class="btn" :class="{'select': selectEBtnList[3].select}" @click="selectE(3)">
              <div class="icon"></div>
              <div class="name">地磁</div>
            </div>-->
          </div>

          <div class="groundDoor">地磁/门磁</div>
          <div class="groundDoorBar">
            <div class="ground iconBox1" :class="{'open': groundOpen}"></div>
            <div class="door iconBox2" :class="{'open': doorOpen}"></div>
          </div>
          <div class="warningListTitle">告警列表<span class="warningSetting">
              <router-link to="/village/msgset/33">
                <el-button type="text">
                  报警设置
                  <i class="el-icon-setting el-icon--right"></i>
                </el-button>
              </router-link>
            </span></div>
          <div class="warningListBox">
            <table>
              <tr>
                <th width="160">地址</th>
                <th width="100">类型</th>
                <th width="30">处理</th>
              </tr>
              <tr v-for="item in warningList" :key="item.key">
                <td @click="locatePoint(item.equipmentId)">{{item.eventContent}}</td>
                <td>{{item.moduleName}}</td>
                <td>
                  <div @click="dealWarning(item.eventSysId)"></div>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>

      <!--    <div class="top-part" :style="{ height:topPartHeight + 'px'}">
        <div class="side mR10 g-bkColor2" style="margin-right:10px;">
          &lt;!&ndash;小区描述&ndash;&gt;
          &lt;!&ndash;<div class="warp-detail">
            <div class="title">安庆</div>
            <div class="desc">安徽安庆湖心北路77号</div>
            <div class="alarm-item">
              <ul>
                <li>
                  <i class="icon iconfont icon-fire"></i>
                  <span class="alarm-name">烟感</span>
                  <span class="line"></span>
                  <span class="alarm-num">20</span>
                </li>
                <li>
                  <i class="icon iconfont icon-water-line"></i>
                  <span class="alarm-name">窨井水位</span>
                  <span class="line"></span>
                  <span class="alarm-num">2</span>
                </li>
                <li>
                  <i class="icon iconfont icon-smog"></i>
                  <span class="alarm-name">井盖开关</span>
                  <span class="line"></span>
                  <span class="alarm-num">2</span>
                </li>
                <li>
                  <i class="icon iconfont icon-parking"></i>
                  <span class="alarm-name">停车位地磁</span>
                  <span class="line"></span>
                  <span class="alarm-num">2</span>
                </li>
                <li>
                  <i class="icon iconfont icon-delete"></i>
                  <span class="alarm-name">垃圾桶满溢</span>
                  <span class="line"></span>
                  <span class="alarm-num">2</span>
                </li>
                <li>
                  <i class="icon iconfont icon-speed-dash"></i>
                  <span class="alarm-name">扬尘监测</span>
                  <span class="line"></span>
                  <span class="alarm-num">1</span>
                </li>
                <li>
                  <i class="icon iconfont icon-involve"></i>
                  <span class="alarm-name">门磁</span>
                  <span class="line"></span>
                  <span class="alarm-num">1</span>
                </li>
              </ul>
            </div>
          </div>&ndash;&gt;
        </div>
        <div class="center mR10 g-bkColor2">
          &lt;!&ndash;当前报警&ndash;&gt;
          <Alarm-map :dept-id="this.$route.params.deptId"></Alarm-map>
        </div>
        <div class="side g-bkColor2">
          &lt;!&ndash;当前报警列表&ndash;&gt;
          <Alarm-list :dept-id="this.$route.params.deptId"></Alarm-list>
        </div>
      </div>-->

      <!--      <div class="bottom-part" :style="{ height:bottomPartHeight + 'px'}">
        <div class="side mR10 g-bkColor2" style="margin-right:10px;">
          &lt;!&ndash;雷达图&ndash;&gt;
          <EnvironmentAware :dept-id="this.$route.params.deptId"></EnvironmentAware>
        </div>
        <div class="center center-list g-bkColor2">
          &lt;!&ndash;垃圾箱列表&ndash;&gt;
          <Dustbin-list :dept-id="this.$route.params.deptId"></Dustbin-list>
        </div>
        &lt;!&ndash;<div class="side">&ndash;&gt;
        &lt;!&ndash;&lt;!&ndash;充电桩列表&ndash;&gt;&ndash;&gt;
        &lt;!&ndash;<charger-list :dept-id="this.$route.params.deptId"></charger-list>&ndash;&gt;
        &lt;!&ndash;</div>&ndash;&gt;
      </div>-->
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import AlarmDetail from '../../../../components/village/alarmDetailB'
import AlarmMap from '../../../../views/village/template/aqlt/components/alarmMap'
import ChargerList from '../../../../components/village/chargerList'
import EnvironmentAware from './components/environmentAware.vue'
import DustbinList from '../../../../components/village/dustbinList'
import AlarmList from '../../../../components/village/alarmList'
import Mapp from '../aqlt/components/Map.vue'
export default {
  name: 'index',
  components: {
    AlarmDetail,
    AlarmMap,
    ChargerList,
    DustbinList,
    AlarmList,
    EnvironmentAware,
    Mapp
  },
  data () {
    return {
      centerBoxWidth: 0,
      topPartHeight: 0,
      bottomPartHeight: 0,
      summaryDetail: {},
      height: 0, // 中间容器高度
      width: '100%', // 中间容器高度
      staticState: 'relative', // 中间容器高度
      warningCount: [
        { v: 20, all: 25, name: '烟感', c: '#50E3C2' },
        { v: 4, all: 8, name: '智能井盖', c: '#50E3C2' },
        // { v: 2, all: 8, name: '井盖开关', c: '#4AD5E2' },
        { v: 2, all: 8, name: '停车位地磁', c: '#4AD5E2' },
        { v: 2, all: 8, name: '垃圾桶满溢', c: '#7ED321' },
        { v: 1, all: 8, name: '扬尘监测', c: '#E2BC4A' },
        { v: 1, all: 8, name: '门磁', c: '#8EBEFF' }
      ],
      litterPGBottom: 0,
      litterPYBottom: 0,
      selectEBtnList: [
        { select: false },
        { select: false },
        { select: false },
        { select: false }
      ],
      groundOpen: false,
      doorOpen: false,
      warningList: [],
      interval1: {},
      showEquipment: true,
      equipmentList: [],
      allList: [], // 报警和设备表
      warningListNote: [], // 报警通知列表
      warningListNoteHis: [], // 报警通知列表历史
      fullScreenNote: [], // 是否是全屏展示的状态
      garbagePer1: '', //
      garbagePer2: '',
      binAddress1: '',
      binAddress2: ''
    }
  },
  computed: {
    ...mapState({
      warnAllData: state => state.event.warnAllData
    })
  },
  created: function () {
    const { warnData } = this.$store.state.event
    if (warnData && warnData.length !== 0) {
      this.$store.commit('setWarnAllData', [])
    }
  },
  mounted () {
    let _this = this
    let gWidth =
      this.$base.getDocumentWidth() -
      this.$base.getConst('common', 'sidebarWidth')
    let gHeight =
      this.$base.getDocumentHeight() -
      this.$base.getConst('common', 'headerHeight')
    this.centerBoxWidth = gWidth - 600
    this.topPartHeight = (gHeight - 30) * 0.54
    this.bottomPartHeight = (gHeight - 30) * 0.46
    this.height = gHeight
    this.getMainData()
    // 推出全屏模式
    $(document).keyup(function (event) {
      _this.height = _this.$base.getDocumentHeight() - 50
      _this.width = _this.$base.getDocumentWidth() - 180 // _this.$base.getDocumentWidth() - 180
      _this.staticState = 'relative'
      _this.fullScreenNote = false
    })

    // 拿垃圾桶数据
    let url = this.$base.getUrl('rosdustbininfo/selectAllDustbinInfo')
    let params = {
      url: url,
      data: {
        'deptId': 33
      }
    }

    this.$store.dispatch('getForm', params).then((res) => {
      // _this.garbagePer1 = res[0].garbagePer.toFixed(2) + '100%'
      _this.garbagePer1 = Number(res[0].garbagePer).toFixed(2) + '%'
      _this.garbagePer2 = Number(res[1].garbagePer).toFixed(2) + '%'
      _this.binAddress1 = res[0].addr
      _this.binAddress2 = res[1].addr
      _this.litterPGBottom = res[0].garbagePer / 100 * 50 - 45
      _this.litterPYBottom = res[1].garbagePer / 100 * 50 - 45
    })
    let url2 = this.$base.getUrl('getList')

    let params2 = {
      url: url2,
      data: {
        'deptId': 33,
        limit: 9999
      },
      noLoading: true
    }

    this.$store.dispatch('getForm', params2).then((res) => {
      _this.equipmentList = res.list
      for (let i = 0; i < _this.equipmentList.length; i++) {
        _this.equipmentList[i].bgColor = '#4A90E2'
      }
      _this.interval1 = setInterval(_this.getNewWarningList, 10000)
    })
  },
  methods: {
    getMainData () {
      // let url = this.$base.getUrl('summaryByDeptId')
      // let params = {
      //   url: url,
      //   data: {
      //     'deptId': this.$route.params.deptId
      //   }
      // }
      //
      // this.$store.dispatch('postForm', params).then((res) => {
      //   this.summaryDetail = res.result
      // })
    },
    aqltFullScreen () {
      // console.log('this.$base.getDocumentHeight()',this.$base.getDocumentHeight(),' this.$base.getDocumentWidth()', this.$base.getDocumentWidth())
      this.height = this.$base.getDocumentHeight()
      this.width = this.$base.getDocumentWidth()
      this.staticState = 'fixed'
      this.top = 0
      this.fullScreenNote = true
    },
    selectE (i) {
      // console.log('select, ',this.selectEBtnList[i].select)
      this.selectEBtnList[i].select = !this.selectEBtnList[i].select
    },
    getNewWarningList () {
      let _this = this
      let url = this.$base.getUrl('getEventListByDeptId')

      let params = {
        url: url,
        data: {
          'deptId': 33
        },
        noLoading: true
      }
      _this.allList = []
      this.$store.dispatch('getForm', params).then((res) => {
        _this.warningList = res
        _this.groundOpen = false
        _this.warningList.forEach((item) => {
          if (item.moduleName === '停车位地磁') {
            if (item.eventValue === '占用') {
              _this.groundOpen = true
            }
          }
        })
        // _this.groundOpen = true

        _this.doorOpen = false

        _this.warningList.forEach((item) => {
          if (item.moduleName === '智能门磁') {
            _this.doorOpen = true
          }
        })
        // _this.doorOpen = true
        // _this.warningListNote = []
        if (_this.showEquipment === false) {
          let allList = []
          _this.warningList.forEach((item) => {
            allList.push(item)
            let hisCon = 0
            _this.warningListNoteHis.forEach((it) => {
              if (it.eventId === item.eventId) {
                hisCon++
              }
            })
            if (hisCon === 0) {
              _this.warningListNote.push(item)
              _this.warningListNoteHis.push(item)
            }
          })
          _this.allList = allList
        } else {
          let allList = []

          _this.warningList.forEach((item) => {
            allList.push(item)
            let hisCon = 0
            _this.warningListNoteHis.forEach((it) => {
              if (it.eventId === item.eventId) {
                hisCon++
              }
            })
            if (hisCon === 0) {
              _this.warningListNote.push(item)
              _this.warningListNoteHis.push(item)
            }
          })
          // console.log('_this.equipmentList',_this.equipmentList)
          _this.equipmentList.forEach((item) => {
            let count = 0

            _this.warningList.forEach((i) => {
              if (item.equipmentId === i.equipmentId) {
                count++
              }
            })
            if (count === 0) {
              allList.unshift(item)
            }
          })
          _this.allList = allList
        }
      })
    },
    dealWarning (id) {
      this.$confirm('将要处理次报警, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = this.$base.getUrl('eventUpdate')
        let params = {
          url: url,
          data: {
            'eventSysId': id
          }
        }

        this.$store.dispatch('postForm', params).then((res) => {
          if (res) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消处理'
        })
      })
    },
    popWindowTemp (data) {
      // 地图嵌入的信息窗文字
      let sContent = ''
      sContent += '<div class="mapStyle">'
      if (data.eventId) {
        sContent += '<div class="mapStyle">'
        sContent += '<h2>报警详情</h2>'
        sContent += '<ul>'
        sContent += '<li class="clearfix"><div class="mapStyle-left">编号:</div><div class="mapStyle-right">' + data.eventId + '</div></li>'
        sContent += '<li class="clearfix"><div class="mapStyle-left">场景:</div><div class="mapStyle-right">' + data.moduleName + '</div></li>'

        if (data.eventValue) {
          sContent += '<li class="clearfix"><div class="mapStyle-left">' + data.eventTypeName + ':</div><div class="mapStyle-right">' + data.eventValue + '</div></li>'
        }
        sContent += '<li class="clearfix"><div class="mapStyle-left">报警时间:</div><div class="mapStyle-right">' + data.eventTime + '</div></li>'
        sContent += '<li class="clearfix"><div class="mapStyle-left">地址:</div><div class="mapStyle-right">' + data.eventContent + '</div></li>'
        sContent += '</ul>'
        sContent += '</div>'
      } else {
        let equipmentState = data.equipmentState === '1' ? '开启' : '关闭'
        let sContent = ''
        sContent += '<div class="mapStyle">'
        sContent += '<h2>设备详情</h2>'
        sContent += '<ul>'
        sContent += '<li class="clearfix"><div class="mapStyle-left">编号:</div><div class="mapStyle-right">' + data.equipmentId + '</div></li>'
        sContent += '<li class="clearfix"><div class="mapStyle-left">场景:</div><div class="mapStyle-right">' + data.moduleName + '</div></li>'

        if (data.eventValue) {
          sContent += '<li class="clearfix"><div class="mapStyle-left">' + data.eventTypeName + ':</div><div class="mapStyle-right">' + data.eventValue + '</div></li>'
        }
        sContent += '<li class="clearfix"><div class="mapStyle-left">状态:</div><div class="mapStyle-right">' + equipmentState + '</div></li>'
        sContent += '<li class="clearfix"><div class="mapStyle-left">地址:</div><div class="mapStyle-right">' + data.equipmentAddr + '</div></li>'
        sContent += '</ul>'
        sContent += '</div>'
        return sContent
      }
      return sContent
    },
    popWindowCallback (data) {
      // console.log(data, 123)
    },
    eventClick (id) {
      let supMap = this.$store.state.supMap
      supMap.moveToDot(id)
    },
    showEquipmentChange () {
      let _this = this
      _this.allList = []
      if (_this.showEquipment === false) {
        let allList = []
        _this.warningList.forEach((item) => {
          allList.push(item)
        })
        _this.allList = allList
      } else {
        let allList = []

        _this.warningList.forEach((item) => {
          allList.push(item)
        })
        // console.log('_this.equipmentList',_this.equipmentList)
        _this.equipmentList.forEach((item) => {
          let count = 0

          _this.warningList.forEach((i) => {
            if (item.equipmentId === i.equipmentId) {
              count++
            }
          })
          if (count === 0) {
            allList.unshift(item)
          }
        })
        // console.log('allList', allList)
        _this.allList = allList
      }
    },
    locatePoint (id) {
      // console.log(id,this.$store.state)
      let supMap = this.$store.state.event.supMap
      supMap.moveToDot(id)
      // this.$refs.map.moveToDot(id)
    },
    delWarningNote (i) {
      this.warningListNote.splice(i, 1)
    }
  },
  beforeDestroy: function () {
    // 页面离开时断开连接,清除定时器
    if (this.interval1) {
      clearInterval(this.interval1)
    }
  }

}
</script>

<style lang="less" scoped>
.village-wrap {
  width: 100%;
  height: 100%;
  background-color: #202835;
}

.main {
  /*padding: 10px;*/
  .center {
    position: relative;
  }
}

.top-part {
  margin-bottom: 10px;
  min-height: 390px;
}

.bottom-part {
  min-height: 290px;
}

.top-part,
.bottom-part {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;

  .side {
    width: 20%;
    border-radius: 4px;
    min-width: 290px;
    max-width: 290px;
    background: rgba(43, 54, 72, 0.95);
  }
  .center {
    width: 100%;
    border-radius: 4px;
    min-width: 548px;
    background: rgba(43, 54, 72, 0.95);
  }
}

.center {
  z-index: 1500;
}
.centerFull {
  /*position: fixed;*/
  width: 100%;
  height: 100%;
  /*top: 0;*/
  /*left: 0;*/
}
.center-list {
  overflow: hidden;
}

.main .mR10 {
  margin-right: 10px;
}

.side-split {
  width: 20%;
  border-radius: 4px;
  min-width: 290px;
  max-width: 290px;
}

.mid-half {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  .half-top {
    margin-bottom: 10px;
  }
  .half-top,
  .half-bottom {
    width: 100%;
    height: 50%;
    border-radius: 4px;
    background: rgba(43, 54, 72, 0.95);
  }
}

.skin-white {
  .title {
    color: #4c6072 !important;
  }
  .alarm-name {
    color: #4c6072 !important;
  }
  .line {
    background-color: #4c6072 !important;
  }
}

.warp-detail {
  padding: 25px 0 0 30px;
  color: #fff;
}

.title {
  font-size: 22px;
}

.desc {
  margin-top: 10px;
  color: #9facc3;
  font-size: 16px;
  font-weight: 600;
}

.alarm-item {
  margin-top: 26px;
  ul li {
    line-height: 10px;
    padding-bottom: 24px;
  }
  i {
    color: #50e3c2;
  }
  .alarm-name {
    margin-left: 10px;
    display: inline-block;
    width: 70px;
  }
  .line {
    vertical-align: middle;
    display: inline-block;
    width: 90px;
    height: 1px;
    background-color: #fff;
    opacity: 0.1;
  }
  .alarm-num {
    margin-right: 22px;
    float: right;
    color: #50e3c2;
    font-size: 14px;
  }
}
.leftConPad {
  padding-left: 40px;
  padding-right: 50px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(12, 22, 38, 1),
    rgba(12, 22, 38, 0.7)
  );
  .blockTitle {
    cursor: pointer;
    margin-top: 20px;
    height: 37px;
    font-size: 26px;
    font-weight: 600;
    color: #ffffff;
    width: 200px;
    line-height: 37px;
  }
  .blockTitle2 {
    margin-top: 4px;
    height: 22px;
    line-height: 22px;
    color: #90bfff;
    font-size: 16px;
    margin-bottom: 5px;
  }

  .countBox {
    height: 30px;

    .countName {
      height: 24px;
      color: #8ebeff;
      line-height: 30px;
      position: relative;
      .num {
        position: absolute;
        right: 4px;
        top: 0;
        font-size: 16px;
        color: #009dff;
      }
    }

    .aline {
      height: 4px !important;
      background-color: #1b3d63;

      .line {
        height: 4px !important;
      }
    }
  }

  .airTitle {
    margin-top: 18px;
    height: 30px;
    font-size: 22px;
    color: #ffffff;
  }
  .littleBinTitle {
    margin-top: 14px;
    height: 30px;
    font-size: 22px;
    color: #ffffff;
  }
  .littleBinImg {
    margin-top: 32px;
    height: 80px;
    position: relative;
    .bin {
      width: 68px;
      height: 80px;
      float: left;
      position: relative;
      overflow: hidden;

      .litterP {
        position: absolute;
        height: 50px;
        left: 16px;
        width: 36px;
      }
    }
    .littleBinPerNum1 {
      position: absolute;
      top: -25px;
      left: 66px;
      color: #ffffff;
    }
    .littleBinPerNum2 {
      position: absolute;
      left: 228px;

      top: -25px;
      color: #ffffff;
    }
    .bin1 {
      margin-left: 53px;
      background: url('../../../../../public/images/village/litterBinG.png')
        no-repeat;

      .litterP {
        bottom: 5px;
        background: url('../../../../../public/images/village/litterBinGIn.png')
          no-repeat;
      }
    }

    .bin2 {
      margin-left: 92px;
      background: url('../../../../../public/images/village/litterBinY.png')
        no-repeat;
      .litterP {
        bottom: 5px;
        background: url('../../../../../public/images/village/litterBinYIn.png')
          no-repeat;
      }
    }
  }
}
.rightConPad {
  padding-left: 40px;
  padding-right: 50px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(12, 22, 38, 0.7),
    rgba(12, 22, 38, 1)
  );

  .equipmentBtnBarTitle {
    margin-top: 18px;
    height: 30px;
    font-size: 22px;
    color: #ffffff;
  }
  .equipmentBtnBarT {
    height: 14px;
    position: relative;
    top: -24px;
    left: 200px;
  }
  .equipmentBtnBar {
    margin-top: 20px;
    height: 64px;
    .btn {
      height: 64px;
      width: 32px;
      float: left;
      margin-left: 50px;

      .icon {
        height: 32px;
        opacity: 0.5;
      }

      .name {
        height: 22px;
        margin-top: 10px;
        color: rgba(80, 227, 194, 0.5);
      }
    }

    .btn.select {
      .icon {
        opacity: 1;
      }
      .name {
        color: rgba(80, 227, 194, 1);
      }
    }
    .btn:nth-of-type(1) {
      margin-left: 20px !important;

      .icon {
        background: url('../../../../../public/images/village/groundEBtn.png')
          no-repeat;
      }
    }

    .btn:nth-of-type(2) {
      .icon {
        background: url('../../../../../public/images/village/groundEBtn.png')
          no-repeat;
      }
    }

    .btn:nth-of-type(3) {
      .icon {
        background: url('../../../../../public/images/village/groundEBtn.png')
          no-repeat;
      }
    }

    .btn:nth-of-type(4) {
      .icon {
        background: url('../../../../../public/images/village/groundEBtn.png')
          no-repeat;
      }
    }
  }
  .groundDoor {
    margin-top: 14px;
    height: 30px;
    font-size: 22px;
    color: #ffffff;
    margin-bottom: 32px;
  }
  .groundDoorBar {
    height: 69px;
    .iconBox1 {
      margin-top: 14px;
      height: 69px;
      width: 60px;
      float: left;
    }
    .iconBox2 {
      height: 80px;
      width: 60px;
      float: left;
    }
    .ground {
      margin-left: 31px;
      background: url('../../../../../public/images/village/carIn.png')
        no-repeat;
    }
    .ground.open {
      background: url('../../../../../public/images/village/carOut.png')
        no-repeat;
    }
    .door {
      margin-left: 124px;
      background: url('../../../../../public/images/village/doorClose.png')
        no-repeat;
    }
    .door.open {
      background: url('../../../../../public/images/village/doorOpen.png')
        no-repeat;
    }
  }

  .warningListTitle {
    margin-top: 28px;
    height: 30px;
    font-size: 22px;
    color: #ffffff;
    position: relative;
    .warningSetting {
      position: absolute;
      right: 40px;
      top: 4px;
      font-size: 16px;
      color: #409eff;
    }
  }
  .warningListBox {
    margin-top: 20px;
    height: 440px;
    th {
      text-align: center;
      height: 40px;
      color: #4a90e2;
    }

    tr {
      text-align: center;
      height: 40px;

      td {
        border-bottom: 1px rgb(27, 61, 99) solid;
      }

      td:nth-of-type(1) {
        color: #90bfff;
      }

      td:nth-of-type(2) {
        color: #f5a623;
      }

      td:nth-of-type(3) {
        div {
          position: relative;
          top: 6px;
          width: 60px;
          height: 20px;
          background: url('../../../../../public/images/village/dealBtn.png')
            no-repeat;
        }
      }
    }
  }
}
.warningNote.fullS {
  top: 70px;
}
.warningNote {
  position: fixed;
  left: 50%;
  top: 70px;
  margin-left: -350px;
  z-index: 2999;
  .warning {
    width: 700px;
    height: 40px;
    background-color: rgba(248, 76, 14, 0.5);
    margin-bottom: 10px;
    .warningLeft {
      float: left;
      width: 120px;
      height: 40px;
      color: #ffffff;
      line-height: 40px;
      text-align: center;
      background: url('../../../../../public/images/village/warningNoteBG.png')
        no-repeat;
    }
    .content {
      float: left;

      width: 580px;
      height: 40px;
      color: #ffffff;
      line-height: 40px;
      text-align: center;
      position: relative;

      .closeBtn {
        position: absolute;
        top: -2px;
        right: 10px;
      }
    }
  }
}
</style>
